<template>
	<div>
		<top-nav></top-nav>
		<div class="app-main">
			<div class="body">
				<div class="user-bio">
					<ul class="list-inline">
						<li class="title">
							<span class="title">账户余额</span>
						</li>
						<li>
							<span class="content">￥0</span>
						</li>
						<li class="edit">
							<el-button type="primary" plain size="small" @click="retireFormVisible = true">提现</el-button>
							<el-button type="primary" plain size="small" @click="retireListVisible = true">提现记录</el-button>
						</li>
					</ul>
					<ul class="list-inline">
						<li class="title">
							<span class="title">邀请码</span></li>
							<li>
								<span class="content">ssdma9</span>
							</li>
							<li class="edit">
								<el-button type="primary" plain size="small" @click="shareVisible=true">分享</el-button>
							</li>
						</ul>
				</div>
				<div class="user-bio-section-header">
					<span>我的推荐订单</span>
				</div>
				<el-table
					:data="list"
					style="width: 100%">
					<el-table-column
						prop="orderid"
						label="订单编号"
						width="170">
					</el-table-column>
					<el-table-column
						prop="buyerid"
						label="购买人id"
						width="170">
					</el-table-column>
					<el-table-column
						prop="payAmount"
						width="170"
						label="消费金额">
					</el-table-column>
					<el-table-column
						prop="percent"
						width="170"
						label="返现比例">
					</el-table-column>
					<el-table-column
						prop="returnAmount"
						width="170"
						label="返现金额">
					</el-table-column>
					<el-table-column
						prop="time"
						width="170"
						label="返现时间">
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 提现弹窗 -->
		<el-dialog title="提现" :visible.sync="retireFormVisible" width="85%">
			<el-form ref="retireForm" :model="retireForm" :rules="rules">
				<el-form-item label="提现金额" label-width="120px" prop="amount">
					<el-input v-model="retireForm.amount" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="支付宝账号" label-width="120px" prop="alpay">
					<el-input v-model="retireForm.alpay" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="支付宝实名姓名" label-width="120px" prop="realname">
					<el-input v-model="retireForm.realname" autocomplete="off"></el-input>
				</el-form-item>
				<div style="margin-bottom: 10px; margin-left: 50px;">
					<font color="red">提现申请提交后，工作人员每周日会统一打款</font>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="retireFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="retire">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 提现记录 -->
		<el-dialog title="提现记录" :visible.sync="retireListVisible" width="85%">
			<el-table :data="retireList">
				<el-table-column property="amount" label="金额" width="120px"></el-table-column>
				<el-table-column property="alpay" label="支付宝账号" width="120px"></el-table-column>
				<el-table-column property="name" label="姓名" width="120px"></el-table-column>
				<el-table-column property="status" label="状态" width="120px"></el-table-column>
				<el-table-column property="note" label="备注" width="120px"></el-table-column>
				<el-table-column property="time" label="时间" width="120px"></el-table-column>
			</el-table>
		</el-dialog>
		<!-- 分享 -->
		<el-dialog title="分享" :visible.sync="shareVisible" width="45%">
			<p style="margin-left: 10px; margin-right: 10px; font-size: 16px; line-height: 25px;">
      邀请码：ssdma9
      <br><span>邀请链接：http://www.otbisheng.xyz/exam/register/ssdma9</span></p>
			<div class="el-dialog__footer" style="margin-top:20px;">
				<span class="dialog-footer">
					<el-button type="default" size="medium" @click="shareVisible=false">取消</el-button>
					<el-button type="primary" size="medium" @click="copy('ssdma9')">复制邀请码</el-button>
					<el-button type="primary" size="medium" @click="copy('http://www.otbisheng.xyz/exam/register/ssdma9')">复制邀请链接</el-button>
				</span>
			</div>
		</el-dialog>
		<input type="text" id="copy_content" style="position:absolute;left:-9999px;">
	</div>
</template>

<script>
export default {
	name:'recommendOrderList',
	data:()=>({
		list:[{id:1,orderid:'0120112900053',buyerid:'otbisheng00111796',payAmount:'100.00',percent:'95%',returnAmount:'5.00',time:'2020-12-05'}],
		retireFormVisible:false, //提现弹窗
		retireListVisible:false, //提现记录弹窗
		shareVisible:false, //分享弹窗
		retireForm:{
			amount:'',
			alpay:'',
			realname:''
		},
		rules: {
			amount: [
					{ required: true, message: '请输入金额', trigger: 'blur' }
			],
			alpay: [
					{ required: true, message: '请输入支付宝账号', trigger: 'blur' }
			],
			realname: [
					{ required: true, message: '请输入支付宝实名姓名', trigger: 'blur' }
			]
		},
		retireList:[{id:1,alpay:'阿斯顿马丁',amount:'100.00',name:'张三',status:'已提现',note:'',time:'2020-12-05'}]
	}),
	methods:{
		retire(){
			this.$refs.retireForm.validate((valid) => {
				console.log(valid)
					if (valid) {
							alert('submit!');
					} else {
							console.log('error submit!!');
							return false;
					}
			});
		},
		//复制文本
    copy(text){
      var inputElement =  document.getElementById("copy_content");
      //给input框赋值
      inputElement.value = text;
      //选中input框的内容
      inputElement.select();
      console.log(inputElement)
      inputElement.setSelectionRange(0, 9999);
      // 执行浏览器复制命令
      document.execCommand("Copy");
      //提示已复制
      this.$message({
				message: '复制成功',
				type: 'success'
			});
			this.shareVisible=false
    }
	}
}
</script>

<style lang="scss" scoped>
.app-main{
	min-height: calc(100vh - 50px);
	position: relative;
	overflow: hidden;
	.body {
    margin-bottom: 30px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
		.user-bio {
			margin-top: 1px;
			color: #606266;
			.list-inline {
				padding-left: 0;
				margin-left: -5px;
				list-style: none;
				height: 40px;
				& li{
					display: inline-block;
					padding-right: 5px;
					padding-left: 5px;
					font-size: 13px;
					&.title{
						width: 100px;
					}
					&.edit{
						float: right;
						margin-right: 60px;
						margin-top: 4px;
					}
					& span.title {
						font-size: 15px;
						font-weight: 700;
						color: #828282;
						line-height: 40px;
					}
					&.content{
						font-size: 15px;
    				color: #1c1c1c;
					}
				}
			}
		}
		.user-bio-section-header {
			border-bottom: 1px solid #dfe6ec;
			padding: 10px 0;
			margin-top: 20px;
			margin-bottom: 10px;
			font-weight: 400;
			& span{
				font-weight: 700;
			}
		}
	}
}
</style>
